//--------------------------------------------------------------------------
//
//  Popups, popovers, and dialogs
//
//--------------------------------------------------------------------------

//--------------------------------------
//  Mixins
//--------------------------------------

.popup-shadow {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

@popup-border-radius: 3px;

.popup-appearance {
    background: white;
    border: none;
    border-radius: @popup-border-radius;
}

//--------------------------------------
//  Container / shade screen
//--------------------------------------

.ModalContainer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display:flex;
    justify-content: center;
    align-items: center;
}

.ModalContainer-modalScreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;
    opacity: 0.25;
    z-index: 99;
}

//--------------------------------------
//  Dialog
//--------------------------------------

.Dialog {
    .popup-appearance;
    .popup-shadow;
    z-index: 100; // Above -modalScreen, below .Popover

    max-width: 95%;  // So there's always at least some background to show it's a popup
    max-height: 90%;

    display:flex;
    flex-direction: column;
}

.Dialog-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
    background: @brand-primary;
    color: white;
    border-top-left-radius: @popup-border-radius;
    border-top-right-radius: @popup-border-radius;
    padding: 0 32px;

    .Dialog--input & {
        background: @brand-input-required;
    }

    .Dialog--error & {
        background: @brand-danger;
    }

    .Dialog--success & {
        background: @brand-success;
    }

    .Dialog--warning & {
        background: @brand-warning;
    }
}

.Dialog-content-scroll {
    overflow: auto;
    flex-shrink: 1;
    
    .Dialog--medium-size & {
        max-width: 464px; 
    }
}

.Dialog-content-margin {
    margin:32px 32px 16px 32px;
}

.Dialog-button-bar {
    padding: 0 32px;
    margin: 16px 0 32px;
    display: flex;
    width:100%;
    justify-content: flex-start;
    flex-shrink: 0;

    //.Dialog-content-scroll+& {
    //    padding-top: 0;
    //}

    &>Button+Button {
        margin-left:0.5em;
    }
}

//--------------------------------------
//  Popover
//--------------------------------------

.Popover {
    position: fixed;
    z-index: 120;
    left: 0;
    top: 0;
    .popup-shadow;
}

.Popover-content {
    .popup-appearance;
    padding: 2em 2em;
}

.Popover-point {
    fill: white;
    position:absolute;
}

.Popover-point--above {
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
}

.Popover-point--below {
    top: -10px;
    left: 50%;
    margin-left: -10px;
}

.Popover-point--left {
    right: -10px;
    top: 50%;
    margin-top: -10px;
}

.Popover-point--right {
    left: -10px;
    top: 50%;
    margin-top: -10px;
}
